<template>
	<view class="pb100">
		<image src="/static/home.png" mode="widthFix" class="image posiab"></image>
		<view class="con" :style="{paddingTop:shh+'px'}">
			<view class="flex-ju-b pt40">
				<image src="/static/hbox.png" mode="widthFix" class="image width64"></image>
				<input v-model="key" @confirm="coninput" confirm-type="search" class="flex1 border000 pg10 ml50 mr20 ra40 center" />
				<image @click="coninput" src="/static/sou.png" mode="widthFix" class="image width45"></image>
			</view>
			<view  class=" flex-a-i  posire size24 ra20 pg20-20 " style="padding-left: 0px;">
				<image mode="widthFix" class="image width200" src="/static/xiaoxi.png"></image>
				<view class="width1000 ">
					<view class="bgfff">
						<swiper class="swiper height50 ml20 hidden" v-if="NoticeList.length" autoplay interval="3000"
							vertical circular>
							<swiper-item @click="tapswipe(lk)" class="flex-a-i" v-for="(item,lk) in NoticeList"
								:key="lk">
								<view class="one ">{{item.title}}</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		
		<view class="con" >
			<swiper class="height310 ra20 hidden " @change="change">
				<swiper-item :current="current" v-for="(item,index) in carouselList" :key="index">
					<image @click="tapitems(item)" :src="item.image" class="image height310 ra20 hidden" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="flex-a-i posiab mt-50 right50 pg5-10" style="background: rgba(0, 0, 0, 0.5);">
			<view class="wh9-9 ra9 bgfff ml5 mr5" :class="{srgb:current==index}" v-for="(item,index) in carouselList"
				:key="index">
			</view>
		</view>
		<view class="con">
			<view  class="flex-ju-a size24 mt50 posire">
				<view @click="navto('/pages/choujiang/index')" class="flex-ju-c flex-col">
					<image mode="heightFix" class="image height80 mb10" src="/static/qiandao.png"></image>
					抽奖活动
				</view>
				<!-- <view @click="navto('hecheng/index?type=0')" class="flex-ju-c flex-col">
					<image mode="heightFix" class="image height80 mb10" src="/static/choujiang.png"></image>
					合成活动
				</view> -->
				<view @click="navto('hecheng/list')" class="flex-ju-c flex-col">
					<image mode="heightFix" class="image height80 mb10" src="/static/choujiang.png"></image>
					合成活动
				</view>
				<view @click="navto('hecheng/index?type=2')"
					class="flex-ju-c flex-col">
					<image mode="heightFix" class="image height80 mb10" src="/static/chouqian.png"></image>
					分解活动
				</view>
			
				<view @click="navto('hecheng/index?type=1')"
					class="flex-ju-c flex-col">
					<image mode="heightFix" class="image height80 mb10" src="/static/houlian.png"></image>
					置换活动
				</view>
				<view @click="navto('/pages/jifen/index')"
					class="flex-ju-c flex-col">
					<image mode="heightFix" class="image height80 mb10" src="/static/shop.png"></image>
					商城中心
				</view>
			</view>
			
			<view class="mt50">
				<view class="flex-a-i  colorccc size32"> 
					<view @click="tabcanp(0)"
						class="flex-ju-c  flex-col  mr30" :class="{bold:tindex==0,color000:tindex==0}">
						<view>
							首发藏品
						</view>
						<view class="flex flex-row height7">
							<image v-show="tindex==0" mode="heightFix" class="height7" src="/static/heng.png"></image>
						</view>
					</view>
					<view @click="tabcanp(1)"
						class="flex-ju-c flex-col ml30 mr30" :class="{bold:tindex==1,color000:tindex==1}">
						惊喜盲盒
						<view class="flex flex-row height7">
							<image v-show="tindex==1" mode="widthFix" class="width106" src="/static/heng.png"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="isdata" class="flex-ju-c mt4vh">
				<view class="flex-ju-c flex-col">
					<image mode="widthFix" class="width210 ra20" src="/static/nodata.png"></image>
					<view class=" size24">这里什么也没有~</view>
				</view>
			</view>
			<template v-for="(item,k) in searchList" :key="k">
				<template v-if="tindex==0">
					<view @click="tapcitem(item)" v-if="item.type=='product'"
						:class="theme?'bg292929 colorfff':'bgfff'" class="posire borderE1E1E1 ra20 mt20">
						<view v-if="item.istime" class="posiab size28 top50 left40 zindex6 colorfff ra20 pg1-20"
							style="background: rgba(0, 0, 0, 0.5);">
							未开售 {{item.sell_date}}
						</view>
						<view v-else class="posiab size28 top50 left40 zindex6 colorfff ra20 pg1-20"
							style="background: rgba(0, 0, 0, 0.5);">
							进行中
						</view>
						<image class="width1000 flex" style="border-top-right-radius: 20rpx;border-top-left-radius: 20rpx;" mode="widthFix" :src="item.thumb"></image>
						<view class=" pg20 ">
							
						<view class="size38 bold mt10">{{item.title}}</view>
						<view class="flex-ju-b mt10">
							<view>
								<view 
									class="flex-a-i size24 borderccc ra10 hidden">
									<view class="bg000 colorFFf pt5 pb5 pl10 pr10">限量</view>
									<view class="pr10 pl10 size28">{{item.sell_num}}份</view>
								</view>
								<image mode="widthFix" class="image width90 mt40 "
									src="/static/bbox.png"></image>
							</view>
							<view class="bold size62 mt40">
								<text class="size42">¥</text>{{(item.money_price / 100).toFixed(2)}}
							</view>
						</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view @click="tapcitem(item)" v-if="item.type=='box'"
						:class="theme?'bg292929 colorfff':'bgfff'" class="posire borderE1E1E1 ra20 mt20 ">
			
						<view v-if="item.istime" class="posiab size28 top50 left40 zindex6 colorfff ra20 pg1-20"
							style="background: rgba(0, 0, 0, 0.5);">
							未开售 {{item.sell_date}}
						</view>
						<view v-else class="posiab size28 top50 left40 zindex6 colorfff ra20 pg1-20"
							style="background: rgba(0, 0, 0, 0.5);">
							进行中
						</view>
						<image class="width1000 flex" style="border-top-right-radius: 20rpx;border-top-left-radius: 20rpx;" mode="widthFix" :src="item.thumb"></image>
						<view class=" pg20 " >
						<view class="size38 bold mt10">{{item.title}}</view>
						<view class="flex-ju-b mt10">
							<view>
								<view 
									class="flex-a-i size24 borderccc ra10 hidden">
									<view class="bg000 colorFFf pt5 pb5 pl10 pr10">限量</view>
									<view class="pr10 pl10 size28">{{item.sell_num}}份</view>
								</view>
								<image mode="widthFix" class="image width90 mt40 "
									src="/static/bbox.png"></image>
							</view>
							<view class="bold size62 mt40">
								<text class="size42">¥</text>{{(item.money_price / 100).toFixed(2)}}
							</view>
						</view>
					</view>
					</view>
				</template>
			</template>
							
			
		</view>
		
		<!-- #ifdef APP -->
		<view v-if="!is_ok.is_ok" class="posifi bottom0 width1000 zindex6">
			<view @click="navto('/pages/user/shiming/index')" class="flex-ju-c">
				<view style="background: rgba(0, 0, 0, 0.6);"
					class="wh530-75 size25 boarderf  colorfff flex-ju-c">
					实名认证后才能购买数字藏品
					<view class="bg000 wh131-48 flex-ju-c ml30">实名认证</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef H5 -->
		<view v-if="!is_ok.is_ok" class="posifi bottom100 width1000 zindex6">
			<view @click="navto('/pages/user/shiming/index')" class="flex-ju-c">
				<view style="background: rgba(0, 0, 0, 0.6);"
					class="wh530-75 size25 boarderf  colorfff flex-ju-c">
					实名认证后才能购买数字藏品
					<view class="bg000 wh131-48 flex-ju-c ml30">实名认证</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef APP -->
		<xun-upgrade></xun-upgrade>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				key:"",
				tindex: 0,
				isdata: false,
				is_ok: "",
				carouselList: "",
				current: 0,
				NoticeList: [],
				searchList: [],
				box: [],
				pbox: [],
				hidden: 0,
				theme: ''
			}
		},
		onPullDownRefresh(){
			console.log("44444")
			this.getinit()
		},
		onLoad() {
			this.getinit()
		},
		methods: {
			getinit(){
				this.http('user/idcard').then((res) => {
					this.is_ok = res.data
					uni.setStorageSync('isOkData', res.data)
				})
				this.http('banner').then(res => {
					this.carouselList = res.data
				})
				this.http('announcement/banner').then(res => {
					this.NoticeList = res.data
				})
				this.getlist()
			},
			coninput(){
				this.getlist();
			},
			getlist() {
				this.http('search',{
					key:this.key,
					item_type:this.tindex==1?'box':'product'
				}).then(res => {
					res.data.list.map(item => {
						item.istime = this.istime(item.sell_date)
					})
					this.searchList = res.data.list
					this.box = []
					this.pbox = []
					res.data.list.map(item => {
						if (item.type == 'box') {
							this.box.push(1)
						} else {
							this.pbox.push(1)
						}
					})
					if (this.pbox.length) {
						this.isdata = false
					} else {
						this.isdata = true
					}
			
					uni.stopPullDownRefresh()
				})
			},
			doUpData() {
				plus.runtime.openURL('https://apps.apple.com/cn/app/%E7%81%AB%E8%8E%B2%E6%96%87%E5%88%9B/id6667104736')
			},
			fixZeroEnd(str, n) {
				return (str + Array(n).join(0)).slice(0, n)
			},
			kaifa() {
				uni.showToast({
					title: "暂未开放",
					icon: "none"
				})
				return
			},
			towx() {
				location.href = "weixin://dl/business/?appid=wxceaadaa6eec0eeab&path=pages/index/index"
			},
			tapcitem(item) {
				uni.navigateTo({
					url: 'detail?type=' + item.type + '&uuid=' + item.uuid
				})
			},
			tapswipe(e) {
				this.navto("/pages/zixun/detail?uuid=" + this.NoticeList[e].uuid)
			},
			change(e) {
				this.current = e.detail.current
			},
			tapitems(item) {
				this.navto('/pages/index/mingren')
				
			// 	if (item.link.url && item.link.url.endsWith('/pages')) {
			// 		this.navto(item.link.url)
			// 	} else {
			// 		// #ifdef APP-PLUS
			// 		this.navto('/pages/agreement?url=' + item.link.url)
			// 		// #endif
			
			// 		// #ifdef H5
			// 		location.href = item.link.url
			// 		// #endif
			// 	}
			},
			tabcanp(index) {
				this.tindex = index
				if (index == 1) {
					if (this.box.length) {
						this.isdata = false
					} else {
						this.isdata = true
					}
				} else {
					if (this.pbox.length) {
						this.isdata = false
					} else {
						this.isdata = true
					}
				}
				this.getlist();
			}
		}
	}
</script>

<style>
.boarderf{
	border-top-right-radius: 13rpx;
	border-top-left-radius: 13rpx;
}
.color000{
	color:#000;
}
</style>
